<%--
    date: 2024-05-22
    显示学生的所有所学科目和对应的成绩。
    studentgrades.jsp
    └── 提交成功 --> studenthome.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
	<title>学生成绩</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/studentGrades.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/updateTime.js"></script>
	<style>
		body {
			background: url('${pageContext.request.contextPath}/resources/img/bg-HYL.jpg') no-repeat center center fixed;
			background-size: cover;
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			position: relative;
		}
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.8);
			z-index: 1;
		}
		.container {
			position: relative;
			z-index: 2;
			background-color: rgba(255, 255, 255, 0.9);
			padding: 20px;
			border-radius: 8px;
			margin-top: 20px;
		}
		.top-bar {
			background-color: #112d4e;
			color: white;
			text-align: center;
			padding: 10px 0;
			position: fixed;
			width: 100%;
			z-index: 3;
			top: 0;
		}
		.main-content {
			margin-top: 60px;
		}
		table {
			border-collapse: collapse;
			width: 80%;
			margin: 20px auto;
			opacity: 0.9; /* 设置表格不透明度 */
		}
		th, td {
			padding: 8px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}
		th {
			background-color: #dbe2ef;
			color: #112d4e;
		}
		td {
			background-color: #f9f7f7;
		}
		.btn-primary {
			background-color: #3f72af;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 4px;
		}
		.btn-primary:hover {
			opacity: 0.8;
		}
		.btn-secondary {
			background-color: #6c757d;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 4px;
		}
		.btn-secondary:hover {
			opacity: 0.8;
		}
	</style>
</head>
<body>
<div class="overlay"></div>
<div class="top-bar">
	<span id="currentTime"></span>
</div>
<div class="container main-content">
	<h1 class="text-center mt-4 mb-4">我的成绩</h1>
	<table class="table table-striped table-bordered table-custom">
		<thead>
		<tr>
			<th>课程编号</th>
			<th>成绩</th>
		</tr>
		</thead>
		<tbody>
		<c:forEach var="grade" items="${grades}">
			<tr>
				<td>${grade.subjectId}</td>
				<td>${grade.grade}</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="text-center mt-3">
		<a href="<c:url value='/student/'/>" class="btn btn-secondary">返回学生主页</a>
	</div>
</div>
</body>
</html>
